/**
 * @class Spark.XButton
 * @extends Spark.Component
 * <p>按钮组件.
 * @author njq.niu@hand-china.com
 * @constructor
 * @param {Object} config 配置对象. 
 */
$S.XButton = Ext.extend($S.ViewComponent,{
	disableCss:'s_disabled',
	overCss:'s_btn-over',
	pressCss:'s_btn-pressed',
	disabled:false,
	constructor: function(config) {
        $S.XButton.superclass.constructor.call(this, config);
    },
    initComponent : function(config){
        $S.XButton.superclass.initComponent.call(this, config);
        this.el = this.wrap.child('button[stype=btn]');
        if(this.hidden == true)this.setVisible(false)
        if(this.disabled == true)this.disable();
    },
    processListener: function(ou){
    	$S.XButton.superclass.processListener.call(this,ou);
    	this.wrap[ou]("click", this.onClick,  this);
        this.el[ou]("focus",this.onFocus,this);
        this.el[ou]("blur",this.onBlur,this);
        this.wrap[ou]("mousedown", this.onMouseDown,  this);
    },
    initEvents : function(){
    	$S.XButton.superclass.initEvents.call(this);
    	this.addEvents(
    	/**
         * @event click
         * 鼠标点击事件.
         * @param {Spark.XButton} button 按钮对象.
         * @param {EventObject} e 键盘事件对象.
         */
    	'click');
    },    
    destroy : function(){
		$S.XButton.superclass.destroy.call(this);
    	delete this.el;
    },
//    destroy : function(){
//    	$S.XButton.superclass.destroy.call(this);
//    	this.el.un("click", this.onClick,  this);
//    	delete this.el;
//    },
	/**
	 * 获取焦点
	 */
	focus: function(){
		if(this.disabled)return;
		this.el.dom.focus();
	},
	/**
	 * 失去焦点
	 */	
	blur : function(){
    	if(this.disabled) return;
    	this.el.dom.blur();
    },
    /**
     * 设置不可用状态
     */
    disable: function(){
    	this.disabled = true;
        this.wrap.removeClass([this.overCss,this.pressCss])
    	this.wrap.addClass(this.disableCss);
    	this.el.dom.disabled = true;
    },
    /**
     * 设置可用状态
     */
    enable: function(){
    	this.disabled = false;
    	this.wrap.removeClass(this.disableCss);
    	this.el.dom.disabled = false;
    },
    onMouseDown: function(e){
    	if(!this.disabled){
        	this.wrap.addClass(this.pressCss);
        	Ext.get(document.documentElement).on("mouseup", this.onMouseUp, this);
    	}
    },
    onMouseUp: function(e){
    	if(!this.disabled){
        	Ext.get(document.documentElement).un("mouseup", this.onMouseUp, this);
        	this.wrap.removeClass(this.pressCss);
    	}
    },
    onClick: function(e){
    	if(!this.disabled){
        	e.stopEvent();
        	this.fireEvent("click", this, e);
    	}
    },
    onFocus : function(e){
        this.isFocused = true;
        this.onMouseOver(e);
    },
    onBlur : function(e){
        this.isFocused = false;
        this.onMouseOut(e)
    },
    onMouseOver: function(e){
    	if(!this.disabled) {
            this.wrap.addClass(this.overCss);
    	}
    },
    onMouseOut: function(e){
    	if(!this.disabled)
    	this.wrap.removeClass(this.overCss);
    }
});
$S.XButton.getTemplate = function(id,text,width){
    width = width||70;
    return '<TABLE class="s_btn " id="'+id+'" cellSpacing="0"><TBODY><TR><TD class="s_btn-tl"><I></I></TD><TD class="s_btn-tc"></TD><TD class="s_btn-tr"><I></I></TD></TR><TR><TD class="s_btn-ml"><I></I></TD><TD class="s_btn-mc"><button hideFocus style="height: 20px;width:'+(width-6)+'px" stype="btn"><span style="line-height:20px;height:20px;">'+text+'</span></BUTTON></TD><TD class="s_btn-mr"><I></I></TD></TR><TR><TD class="s_btn-bl"><I></I></TD><TD class="s_btn-bc"></TD><TD class="s_btn-br"><I></I></TD></TR></TBODY></TABLE><script>new Spark.XButton({"id":"'+id+'"});</script>';
}